import React, { useState, useEffect, useRef } from 'react'
import { Button, Row, Col, Form, Input, Alert, Spin, Layout } from 'antd'
import { connect } from 'dva'
import styles from "./index.css";

const { Header, Footer, Content } = Layout;


const FormItem = Form.Item;


const Login = ({
    loading, dispatch, login,
}) => {
    const { errorMsg } = login;

    const [errorMsgVisible, setErrorMsgVisible] = useState(false);
    const [loginingInfo, setLoginingInfo] = useState(null);

    useEffect(() => {
        const visible = (errorMsg.message !== undefined && errorMsg.message !== null)
        setErrorMsgVisible(visible);
        if (visible) {
            setLoginingInfo(null);
        }
    }, [errorMsg])

    const hideErrorMsg = () => {
        setErrorMsgVisible(false);
    }

    const handleOk = values => {
        setLoginingInfo("正在登陆中...");
        dispatch({
            type: 'login/loginStudent',
            payload: {
                "UserName": values.userName,
                "UserPwd": values.userPwd
            }
        })
    }


    return <Layout >
        <Header style={{ background: "white" }}>
        </Header>
        <Content style={{
            backgroundImage: `url(/image/login/background.png})`, backgroundSize: "100% 100%"
        }}>

            <Row justify='start' align="middle" style={{ minHeight: "80vh" }}>
                <Col offset={2} span={12}>
                    <img src={"/image/login/peitu.png"} />
                </Col>
                <Col offset={1} span={5}>
                    <Spin tip={loginingInfo||""} spinning={loginingInfo} size='large' style={{ minHeight: "25%", width: "4rem" }}>
                        <Form
                            className={styles.form}
                            labelCol={{ span: 5 }}
                            onFinish={handleOk}
                            onValuesChange={hideErrorMsg}
                        >
                            <div style={{ textAlign: 'center' }}><img src={'/image/login/welcome.png'} /></div>
                            <br />
                            <FormItem name="userName" label="用户名"
                                rules={[{ required: true }]} hasFeedback>
                                <Input />
                            </FormItem>
                            <br />
                            <FormItem name="userPwd" label="密码" rules={[{ required: true }]} hasFeedback>
                                <Input.Password type='password' />
                            </FormItem>
                            <br />
                            <Row justify={'center'}>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    loading={loading.effects.login}
                                    style={{ width: '60%' }}
                                >
                                    登陆
                                </Button>
                            </Row>
                            <br />

                            <div>{errorMsgVisible ? <Alert message={errorMsg.message} type="error" showIcon /> : null}</div>

                        </Form>

                    </Spin>
                </Col>
            </Row>

        </Content >
        <Footer style={{ minHeight: '14vh', background: '#005CBB' }} >
            <h2>此处可添加网站信息</h2>
        </Footer>
    </Layout >
}


export default connect(({ loading, dispatch, login }) => ({
    loading, dispatch, login,
}))(Login);